<template>
  <IfRow :span="24">
    <IfBacktop></IfBacktop>
    <if-alert
    title="成功提示的文案"
    type="success"
    center
    show-icon>
  </if-alert>
  <if-alert
    title="警告提示的文案"
    type="warning"
    show-icon :closable="false">
  </if-alert>
  <if-alert
    title="成功提示的文案"
    type="error"
    center
    show-icon
    closeText="关闭">
  </if-alert>
  <if-alert
    title="成功提示的文案"
    type="info"
    center
    effect="dark"
    show-icon>
  </if-alert>
  <if-alert
    title="成功提示的文案"
    type="success"
    description="文字说明文字说明文字说明文字说明文字说明文字说明"
    show-icon>
  </if-alert>
    <div>
      <ifButton @click="test" style="width: 100%; margin-bottom: 10px"> all </ifButton>
      <ifButton @click="loading_directive" icon="search" type="primary" size="small"> 搜索 </ifButton>
      <ifButton @click="loading_service" type="success" plain>123</ifButton>
      <ifButton @click="drawer = !drawer" type="warning" round> 打开左侧抽屉 </ifButton>
      <ifButton @click="test" icon="spinner" :loading="true" type="danger">加载中</ifButton>
      <ifButton @click="check" type="info" disabled>12312</ifButton>
      <ifButton @click="showMessageBox" type="text">MessageBox</ifButton>
      <IfBadge value="123" type="success">
        <ifButton @click="_message" linear="linear-gradient(135deg,#8219fa,#197ffa)">123123</ifButton>
      </IfBadge>
      <ifButton circle icon="search" type="primary"></ifButton>

      <if-button-group>
        <ifButton icon="search" type="primary" size="small" @click="dialogvisible = !dialogvisible"> 打开dialog </ifButton>
        <ifButton icon="search" type="primary" size="small" @click="Notification"> Notification </ifButton>
      </if-button-group>
    </div>

    <div v-loading="{visible: loading, fullscreen: false, background: 'rgba(0, 0, 0, 0.8)'}">
      <if-link icon="fan" type="primary" :underline="false">123123</if-link>
      <if-link icon="fan" type="success">123123</if-link>
      <if-link icon="fan" type="warning" disabled>123123</if-link>
      <if-link icon="fan" type="danger" :loading="true">123123</if-link>
    </div>

    <div style="margin-top: 10px">
      <IfIcon icon="camera" size="12" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="search" size="16" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="fan" size="24" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="dog" size="24" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="cat" size="24" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="grin-squint-tears" linear="linear-gradient(135deg,#8219fa,#197ffa)" :size="24" style="margin-left: 10px"></IfIcon>
      <IfIcon icon="star" size="24" color="#66ccff" style="margin-left: 10px"></IfIcon>
    </div>

    <div style="margin-top: 10px">
      <IfRate showText :size="24" @change="rate"></IfRate>
    </div>

    <if-affix>
      <if-card class="box-card" style="width: 320px">
        图钉 固定在顶部
      </if-card>
    </if-affix>

    <IfRow :gutter="9">
      <IfCol :span="6">
        <if-video :url="rtcUrl" type="mp4" :isLive="false" v-if="rtcUrl"></if-video>
        <if-button-group>
          <ifButton type="primary" size="small" @click="RtcEventChange('play')"> 开始录屏 </ifButton>
          <ifButton type="primary" size="small" @click="RtcEventChange('stop')"> 结束录屏 </ifButton>
        </if-button-group>
        <!-- RTCEnable 是否启用rtc远程通信 TimeBackBlob 多长时间 返回blob文件 successCallback 成功调用RTC回调 RTCServerConfig stun turn服务器配置 -->
        <if-rtc-video :successCallback="successCallback" :RTCServerConfig="RTCServerConfig" :RTCEnable="false" :RtcEvent="RtcEvent" :BackBlob="BackBlob" :TimeBackBlob="1000 * 10" />
      </IfCol>
      <IfCol :span="8" :offset="4">
        <if-carousel type="card" trigger="click" height="150px">
          <if-carousel-item v-for="item in 4" :key="item">
          </if-carousel-item>
        </if-carousel>
      </IfCol>
    </IfRow>

    <if-col :span="10" v-loading="{visible: loading, fullscreen: false, background: 'rgba(0, 0, 0, 0.8)'}">
      <if-row>
        <if-col :span="24"><div class="grid-content bg-purple-dark"></div></if-col>
      </if-row>
      <if-row>
        <if-col :span="12"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="12"><div class="grid-content bg-purple-light"></div></if-col>
      </if-row>
      <if-row>
        <if-col :span="8"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="8"><div class="grid-content bg-purple-light"></div></if-col>
        <if-col :span="8"><div class="grid-content bg-purple"></div></if-col>
      </if-row>
      <if-row>
        <if-col :span="6"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="6"><div class="grid-content bg-purple-light"></div></if-col>
        <if-col :span="6"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="6"><div class="grid-content bg-purple-light"></div></if-col>
      </if-row>
      <if-row>
        <if-col :span="4"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="4"><div class="grid-content bg-purple-light"></div></if-col>
        <if-col :span="4"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="4"><div class="grid-content bg-purple-light"></div></if-col>
        <if-col :span="4"><div class="grid-content bg-purple"></div></if-col>
        <if-col :span="4"><div class="grid-content bg-purple-light"></div></if-col>
      </if-row>
    </if-col>

    <if-col :span="10" :push="1">
      <if-row :gutter="10">
        <if-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></if-col>
        <if-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></if-col>
        <if-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></if-col>
        <if-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></if-col>
      </if-row>
    </if-col>

    <if-col :span="10" :push="1" style="margin-top: 10px">
      <if-container direction="horizontal">
        <if-aside width="200px">Aside</if-aside>
        <if-container direction="vertical">
          <if-header>Header</if-header>
          <if-main>Main</if-main>
          <if-footer>Footer</if-footer>
        </if-container>
      </if-container>
    </if-col>

    <if-drawer v-model:visible="drawer" :title="123123" size="50%">
      <ifButton @click="drawer1 = !drawer1" type="warning" round> 打开左侧抽屉 </ifButton>
      <if-drawer :showMask="false" :MaskClose="false" v-model:visible="drawer1" :title="123123" :beforeClose="beforeClose">
        123123
      </if-drawer>
    </if-drawer>

    <if-col :span="5" style="margin-top: 10px;" v-domZoom>
      <if-card class="box-card">
        <template v-slot:header>
          <div class="clearfix">
            <span>可缩放卡片</span>
            <if-button style="float: right; padding: 3px 0" type="text" @click="loadJs">动态JS CDN</if-button>
          </div>
        </template>
        <if-tag v-for="(item, index) in tag" :closable="item.closable" :size="item.size" :type="item.type" :key="index" class="text item" style="margin-right: 5px"
          @click="tag_close">
          {{ item.type }}
        </if-tag>
      </if-card>
    </if-col>
    <if-col :span="5" :push="1" style="margin-top: 10px; position: absolute;" v-moveDrag>
      <if-card class="box-card">
        <if-avatar src="https://portrait.gitee.com/uploads/avatars/user/358/1074706_mkccl_1595055898.png!avatar200" icon="user"></if-avatar>
        可拖拽卡片
      </if-card>
    </if-col>
    <if-col :span="20">
      <if-divider>
        <if-icon icon="fan" :push="1"></if-icon>
      </if-divider>
    </if-col>
    <if-col :span="5">
      <if-page-header title="返回" content="查看详情"></if-page-header>
    </if-col>
    <if-col :span="12">
      <if-collapse v-model:collapse="collapse" accordion>
        <if-collapse-item title="switch开关">
          <div>
            <if-switch :value="true" RightBtnIcon="check-circle" disabled />
            <if-switch v-model:value="switchValue" />
            <if-switch
              left-btn-icon="times-circle"
              RightBtnIcon="check-circle"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model:value="switchValue"
            />
            <if-switch
              v-model:value="switchValueError"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="右侧文字"
              inactive-text="左侧文字"
            >
            </if-switch>
          </div>
        </if-collapse-item>
        <if-collapse-item>
          <template v-slot:title>
            svg: <if-svg-icon icon-class="/img/icons/safari-pinned-tab.svg" />
          </template>
          <div>
            input 失去焦点后 转换
            <input v-model="pinyin" v-pinyin="{type: 'input', value: '汉字转拼音：洛水天依', callback: pinyin_callback}" /> {{ parsingPinyin }}
          </div>
        </if-collapse-item>
        <if-collapse-item title="人脸识别">
          <div class="demo-container">
            <img src="/img/123.jpeg" id="faceImage" style="width: 460px; height: 420px" />
            <if-button @click="faceImage">点击识别</if-button>
          </div>
        </if-collapse-item>
        <if-collapse-item :title="`MMD播放 fps: ${mmdFps}`">
          <!-- <if-mmd
            modelFile="/mmd/test/Luo.pmx"
            vmdFiles="/mmd/test/202010272125566867.vmd"
            cameraFiles="/mmd/test/202010272128042745.vmd"
            audioFile="/mmd/test/202010272137373016.wav"
            :fpsCallback="MMDPlayFPS"
            :width="640"
            :height="320"
          /> -->
        </if-collapse-item>
      </if-collapse>
    </if-col>
    <if-col :span="12">
      <if-breadcrumb separator-class="angle-right">
        <if-breadcrumb-item :to="{ path: '/' }">主页</if-breadcrumb-item>
        <if-breadcrumb-item>狗东西</if-breadcrumb-item>
      </if-breadcrumb>
      <div style="margin-top: 10px">
        <if-input
          placeholder="请选择日期"
          suffix-icon="calendar-alt"
          style="width: 140px; margin-right: 10px"
          v-model:value="input" />
        <if-input
          type="password"
          show-password
          style="width: 140px;"
          v-model:value="input" />
        <if-tooltip effect="dark" content="Top 提示文字" placement="top-start">
          <if-button>Top</if-button>
        </if-tooltip>
        <if-tooltip effect="dark" content="Bottom 提示文字" style="margin-left: 120px" placement="bottom-end">
          <if-button>
            <div>Bottom</div>
          </if-button>
        </if-tooltip>
        <if-tooltip effect="dark" content="Left 提示文字" style="margin-left: 240px" placement="left-start">
          <if-button>Left</if-button>
        </if-tooltip>
        <if-tooltip effect="dark" content="Right 提示文字" style="margin-left: 340px" placement="right-start">
          <if-button>Right</if-button>
        </if-tooltip>
      </div>
    </if-col>
  </IfRow>
  <if-dialog title="Title" v-model:visible="dialogvisible" :before-close="dialogHandleClose">
    <div>
      <if-time-line :reverse="reverse">
        <if-timeline-item
          v-for="index in 4"
          :key="index"
          icon='dog'
          color='#0bbd87'
          timestamp="2020-10-22">
          {{ index }}
        </if-timeline-item>
        <if-timeline-item
          color='#66ccff'
          timestamp="2020-10-22">
          <if-image
            style="width: 100px; height: 100px"
            ref="image"
            :src="url"
            :preview-src-list="srcList">
          </if-image>
        </if-timeline-item>
      </if-time-line>
    </div>
    <template v-slot:footer>
      <ifButton @click="dialogvisible = !dialogvisible">关闭</ifButton>
      <ifButton icon="print" type="primary" @click="dialogvisible = !dialogvisible">保存</ifButton>
    </template>
  </if-dialog>
</template>

<script>
import { h, ref, watch } from 'vue'
import IfAffix from '../../packages/lib/affix/src/IfAffix.vue'

export default {
  components: { IfAffix },
  name: 'Home',

  data () {
    return {
      input: '',
      RtcEvent: 'stop',
      // 配置 stun turn 服务
      RTCServerConfig: [],
      switchValueError: false,
      switchValue: false,
      dialogvisible: false,
      visible: false,
      loading: false,
      drawer: false,
      drawer1: false,
      pinyin: '',
      parsingPinyin: '',
      tag: [{
        type: 'success',
        size: 'medium'
      }, {
        type: 'info',
        size: 'small'
      }, {
        type: 'danger',
        size: 'mini'
      }, {
        type: 'warning',
        closable: true,
        size: ''
      }],
      collapse: [1],
      url: 'https://mzshe.cn/static/image/STtO8U6C.webp',
      srcList: [
        'https://mzshe.cn/static/image/zZUMQJgp.webp',
        'https://mzshe.cn/static/image/STtO8U6C.webp'
      ]
    }
  },

  setup (p, $) {
    const image = ref(null)
    const blobRef = ref(null)
    const rtcUrl = ref(null)
    const mmdFps = ref(0)
    watch(image, newVal => {
      console.log(newVal)
      image.value = newVal
      console.log(image.value.$el.style)
    })

    const check = function () {
      console.log(image.value.$el.style)
    }

    const BackBlob = function (data) {
      if (!blobRef.value) {
        blobRef.value = data.blob
        rtcUrl.value = URL.createObjectURL(data.blob)
        console.log(data)
      }
    }

    const successCallback = function (calldata) {
      console.log(calldata)
    }

    const MMDPlayFPS = function (fps) {
      mmdFps.value = fps
    }

    return { image, check, BackBlob, rtcUrl, successCallback, MMDPlayFPS, mmdFps }
  },

  mounted () {
    const socket = this.$baseUtil.socket({
      options: {
        model: 'socketIo',
        url: 'https://api.mzshe.cn',
        Heartbeat: {
          time: 3000,
          data: {
            cmd: 1
          }
        },
        callback: (event, data) => {
          console.log(event, data)
        }
      }
    })

    setTimeout(() => {
      socket.emit('login', {
        cmd: 1,
        token: '123'
      })
    }, 3000)
  },

  methods: {
    loading_service: function (e) {
      this.$loading({
        visible: true
      })

      setTimeout(() => {
        this.$loading({
          visible: false
        })
      }, 1500)
    },

    test: function () {},

    loading_directive: function () {
      this.loading = !this.loading
      setTimeout(() => {
        this.loading = !this.loading
      }, 1500)
    },

    rate: function (data) {
      console.log(data)
    },

    beforeClose: (done) => {
      console.log(123)
      done()
    },

    _message: function () {
      this.$message({
        message: '123',
        type: 'success',
        showClose: true
      })
    },

    tag_close: (e) => {
      console.log(e)
    },

    pinyin_callback: function (data) {
      this.parsingPinyin = data.pinyin
    },

    dialogHandleClose: function (done) {
      done()
      this.$message({
        message: '这是关闭回调',
        type: 'success',
        showClose: true
      })
    },

    Notification: function () {
      this.$notify.success({
        title: 'Title',
        message: '这是Notification',
        showClose: true
      })
    },
    RtcEventChange: function (e) {
      this.RtcEvent = e
    },
    loadJs: function () {
      this.$documentUtils.loadJs('https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js', (e, v) => {
        if (v === true) {
          console.log(window.$('#app'))
        }
      })
    },
    faceImage: function () {
      this.$trackingFace.trackingFace({
        Imgtarget: '#faceImage',
        callBack: event => {
          console.log(event)
        }
      })
    },
    showMessageBox: function () {
      this.$messagebox({
        title: 'Title',
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    }
  }
}
</script>

<style lang="scss">
  .if-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .if-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #66CCFF;
  }
  .bg-purple {
    background: #93c6ff;
  }
  .bg-purple-light {
    background: #dde7ff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .if-header, .if-footer {
    background-color: #66CCFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .if-aside {
    background-color: #93c6ff;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .if-main {
    background-color: #93c6ff;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .if-container {
    margin-bottom: 40px;
  }

  .if-container:nth-child(5) .if-aside,
  .if-container:nth-child(6) .if-aside {
    line-height: 260px;
  }

  .if-container:nth-child(7) .if-aside {
    line-height: 320px;
  }
  .if-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .if-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .if-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
